<!DOCTYPE html>
<html>
<head>
    <!--引入vue库-->
    <script type="text/javascript" src="/static/plugins/vue/2.6.9/vue.min.js"></script>
    <!--引入element-ui库-->

    <script src="${base}/static/plugins/element-ui/2.15.8/index.min.js"></script>
    <link rel="stylesheet" href="/static/plugins/element-ui/2.15.8/theme-chalk/index.min.css">

    <!--网络请求框架-->
    <script src="${base}/static/plugins/axios/1.7.3/axios.min.js"></script>
    <script src="${base}/static/plugins/qs/6.6.0/qs.min.js"></script>
    <script src="${base}/static/plugins/ms/3.0/ms.umd.js"></script>
    <script src="${base}/static/plugins/ms/3.0/ms-el-form.umd.js"></script>

    <script>
        ms.base = "{ms:global.contextpath/}";
    </script>

    <script src="${base}/static/mdiy/index.js"></script>
    <!--js位置-start-->
    <script>
        var app = new Vue({
            el: '#app',
            watch: {},
            data: {
                loading: false,
                verifCode: ms.base + "/code?t=" + new Date().getTime(),
                saveDisabled: false,
                //表单数据
                form: {
                    // 验证码
                    rand_code: '',
                    // 登录名
                    peopleName: '',
                    // 登录密码
                    peoplePassword: '',
                },
                rules: {
                    // 登录名
                    peopleName: [{
                        "required": true,
                        "message": "登录名不能为空"
                    }, { "pattern": "^[^[!@#$%^&*()_+-/~?！@#￥%…&*（）——+—？》《：“‘’]+$", "message": "登录名格式不匹配" }, {
                        "min": 1,
                        "max": 30,
                        "message": "登录名长度必须为1-30"
                    }],
                    // 登录密码
                    peoplePassword: [{
                        "required": true,
                        "message": "登录密码不能为空"
                    }, { "pattern": "^[^[!@#$%^&*()_+-/~?！@#￥%…&*（）——+—？》《：“‘’]+$", "message": "登录密码格式不匹配" }, {
                        "min": 1,
                        "max": 30,
                        "message": "登录密码长度必须为1-30"
                    }],

                    rand_code: [
                        { required: true, message: '请输入验证码', trigger: 'blur' },
                        { min: 1, max: 4, message: '长度不能超过4个字符', trigger: 'change' }
                    ],
                },
            },
            methods: {
                //获取验证码
                code: function() {
                    this.verifCode = ms.base + "/code?t=" + new Date().getTime();
                },
                //登录
                login: function() {
                    var that = this;
                    //表单验证
                    that.$refs.form.validate(function(valid) {
                        if (valid) {
                            //更新加载状态
                            that.loading = true;
                            //请求验证接口
                            ms.http.post("/checkLogin.do", that.form).then(function(res) {
                                //成功
                                if (res.result) {
                                    that.$notify({
                                        title: '成功',
                                        message: '登录成功',
                                        type: 'success'
                                    });
                                    //重定向调整地址
                                    var url = ms.util.getParameter("url");
                                    if (url) {
                                        url = decodeURIComponent(url);
                                        var linkIndex = url.lastIndexOf("link=");
                                        if (linkIndex > 0) {
                                            var link = url.substring(url.lastIndexOf("link=") + 5)
                                            url = decodeURIComponent(link);
                                        }

                                    } else {
                                        url = "/people/peopleInfo.do";
                                    }
                                    window.location.href = url;
                                }
                                //更新加载状态
                                that.loading = false;
                            }).catch(function(err) {
                                that.code();
                                that.loading = false;
                            });
                        }
                    });
                }
            },
            created: function() {
                this.code();
            }
        })
    </script>
    <!--js位置-end-->
</head>
<body>
<!--表单位置-start-->
<div id="app">
    <div @keydown.13='login'>
        <el-form ref="form" :model="form" :rules="rules" label-position="right" size="large" label-width="130px">
            <el-form-item label="登录名" prop="peopleName">
                <el-input v-model="form.peopleName" :disabled="false" :readonly="false" :clearable="true" placeholder="请输入登录名">
                </el-input>
            </el-form-item>
            <el-form-item label="登录密码" prop="peoplePassword">
                <el-input v-model="form.peoplePassword" :disabled="false" :readonly="false" :clearable="true" type="password" placeholder="请输入登录密码">
                </el-input>
            </el-form-item>
            <el-row :gutter="0" justify="start" align="top">
                <el-col :span="12">
                    <el-form-item label="验证码" prop="rand_code">
                        <el-input v-model="form.rand_code" :disabled="false" :readonly="false" :clearable="true" placeholder="请输入验证码">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <div>
                        <img :src="verifCode" @click="code" />
                        <div @click="code">
                            看不清？换一张
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-form-item label=" ">
                <el-button @click="login" type="primary" :loading="loading">
                    {{loading?'登录中':'立即登录'}}
                </el-button>
                <div>
                    <el-link href="/mdiyPage/resetPassword.do" :underline="false" icon="el-icon-warning-outline">忘记密码
                    </el-link>
                    <el-link href="/mdiyPage/register.do" :underline="false" icon="el-icon-user">账号注册</el-link>
                </div>
            </el-form-item>
        </el-form>
    </div>
</div>
</body>
</html>
